<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/base.js"></script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-6 column">
            <h3>
                登陆按钮
            </h3>
            <form role="form">
                <div class="form-group">
                    <label for="phoneNo">手机号</label><input type="text" class="form-control" id="phoneNo" />
                </div>
                <div class="form-group">
                    <label for="code">验证码</label><input type="text" class="form-control" id="code" />
                    <button type="submit" id="sendButton" class="btn btn-default" onclick="return onSendClick();">获取验证码</button>
                </div>

                <button type="submit" class="btn btn-default" onclick="return onSignInClick();">登陆</button>
                <script>
                    let sendButton=document.getElementById("sendButton");
                    let num=60;
                    function changeText(){
                        sendButton.innerHTML="获取验证码("+num+")";
                        num--;
                        if(num>0){
                            setTimeout("changeText()",1000);
                        }else{
                            sendButton.clickable=true;
                            sendButton.style.color="#000000";
                            num=60;
                        }
                    }
                    function onSendClick(){
                        let url="http://localhost:9001/qf/user/sendSms";
                        let method="post";
                        let requestJson={};
                        requestJson.phone=document.getElementById("phoneNo").value;
                        $.rest(method,url,requestJson,function (r){
                            if(r.ok){
                                sendButton.clickable=false;
                                sendButton.style.color="#a1a1a1";
                                changeText();
                            }
                            alert(r.msg);
                        });
                        return false;
                    }
                    function onSignInClick(){
                        let url="http://localhost:9001/qf/user/smsSignIn";
                        let method="post";
                        let requestJson={};
                        requestJson.phone=document.getElementById("phoneNo").value;
                        requestJson.code=document.getElementById("code").value;
                        $.rest(method,url,requestJson,function (r){
                            if(r.ok){
                                let token=r.result.token;
                                let id=r.result.user.id;
                                let username=r.result.user.username;
                                let nickname=r.result.user.nickname;
                                let gender=r.result.user.gender;
                                let telephone=r.result.user.telephone;
                                let email=r.result.user.email;
                                let iconLink=r.result.user.iconLink;
                                //使用前端的数据存储
                                localStorage.setItem("token",token);
                                localStorage.setItem("id",id);
                                localStorage.setItem("username",username);
                                localStorage.setItem("nickname",nickname);
                                localStorage.setItem("gender",gender);
                                localStorage.setItem("telephone",telephone);
                                localStorage.setItem("email",email);
                                localStorage.setItem("iconLink",iconLink);
                                window.location.href="signIn.html";
                            }else{
                                alert(r.msg);
                            }
                        });
                        return false;
                    }
                </script>
            </form>
        </div>
    </div>
</div>

</body>
</html>